<template>
  <div>
    <div class="page-title">
      {{ t('about.pt') }}
    </div>
    <Banner bannerModel="8" />

    <div>
      <!-- <div class="introduce g-con-m">
        <h3 class="title">Dock repair service</h3>
        <div class="txt">
          A company profile refers to a copy that introduces the basic situation and business strategy of a company to the public through text and image materials. Mainly introduce the name of the enterprise, legal nature of the enterprise, establishment address, establishment time, industry, registered capital, building area, and technical equipment conditions; Production and business scope, main product structure; The development strategy and business philosophy of the enterprise. A company
          profile refers to a copy that introduces the basic situation and business strategy of a company to the public through text and image materials. Mainly introduce the name of the enterprise, legal nature of the enterprise, establishment address, establishment time, industry, registered capital, building area, and technical equipment conditions; Production and business scope.
        </div>
      </div> -->
      <!-- <div class="team g-con-m">
        <div class="title">
          {{ t('about.t1') }}
        </div>
        <ul class="list">
          <li
            class="item"
            v-for="item in 4"
            :key="item"
          >
            <div class="left">
              <img
                src="@/assets/img/i3.png"
                alt=""
              />
            </div>
            <div class="right">
              <h2>name</h2>
              <div class="position">Creotive Director</div>
              <div
                class="txt"
                style="color: #6a6973"
              >
                Summer is a senior editor on the platform with extensive shipping experience.
              </div>
            </div>
          </li>
        </ul>
      </div> -->
      <div class="global-network g-con-m">
        <div class="title">
          {{ t('about.t2') }}
        </div>
        <div class="top">
          <img src="@/assets/img/2023-11-03_101748.png" />
        </div>
        <div class="bottom">
          <!-- <h2>San Francisco Office</h2> -->
          <ul class="way-list">
            <li class="way-item">
              <h3>{{ t('about.t2_1') }}</h3>
              <div class="txt">{{ activeSite.address }}</div>
            </li>
            <li class="way-item">
              <h3>{{ t('about.t2_2') }}</h3>
              <div class="txt">{{ activeSite.email }}</div>
            </li>
            <li class="way-item">
              <h3>{{ t('about.t2_3') }}</h3>
              <div class="txt">{{ activeSite.phone }}</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="information g-con-m">
        <div class="title">
          {{ t('about.t3') }}
        </div>
        <ul class="list">
          <li
            class="item"
            v-for="item in newsListValue"
            :key="item"
            @click="openUrl('/detail', {id: item.id})"
          >
            <div class="left">
              <img
                :src="item.newsImage"
                alt=""
              />
            </div>
            <div class="right">
              <h2>{{ item.newTitle }}</h2>
              <div class="txt mt-1">
                {{ toText(item.newContent, 120) }}
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="partners">
        <h2>{{ t('about.t5') }}</h2>
        <ul class="partners-list">
          <li class="item">
            <div class="num">{{ partnersObj?.partnersNum }}</div>
            <p class="name">{{ t('about.t5_1') }}</p>
          </li>
          <li class="item">
            <div class="num">{{ partnersObj?.customerNum }}</div>
            <p class="name">{{ t('about.t5_2') }}</p>
          </li>
          <li class="item">
            <div class="num">{{ partnersObj?.enterpriseNum }}</div>
            <p class="name">{{ t('about.t5_3') }}</p>
          </li>
        </ul>
        <ul class="img-list">
          <li
            class="item"
            v-for="item in partnersList"
            :key="item"
          >
            <img :src="item.enterpriseLogo" />
          </li>
        </ul>
      </div>
      <div class="join-us g-con-m">
        <div class="title">
          {{ t('about.t4') }}
        </div>
        <!-- <div class="content">
                    <div class="button-prev">
                        <img src="@/assets/img/btn_shangyiye_nor.png" alt="">
                    </div>
                    <Swiper class="swiper-container" :navigation="{
                        nextEl: '.button-next',
                        prevEl: '.button-prev',
                    }" :pagination="{ clickable: true }" :autoplay="{ autoplay: true }" loop>
                        <swiper-slide class="swiper-slide" v-for="(item, i) in headBannerList" :key="i">
                            <a :href="item.bannerHref" target="_blank"><img :src="item.bannerImage" alt="" /></a>
                        </swiper-slide>
                        <div class="swiper-pagination"></div>
                    </Swiper>
                    <div class="button-next">
                        <img src="@/assets/img/btn_xiayiye_nor.png" alt="">
                    </div>
                </div> -->
          <div class="con mt-1">
            <div class="item">
              <img
                src="@/assets/img/pic_09.png"
                alt=""
              />
              <div class="info">
                <div class="tit">{{ t('index.m7_a1') }}</div>
                <div class="list-box">
                  <div class="li">{{ t('index.m7_a2') }}</div>
                  <div class="li">{{ t('index.m7_a3') }}</div>
                  <div class="li">{{ t('index.m7_a4') }}</div>
                </div>
                <el-button
                  type="primary"
                  class="btn mt-3"
                  @click="openUrl('/register')"
                >
                  {{ t('index.m7_btn') }}
                </el-button>
              </div>
            </div>
          </div>
      </div>
      <div class="join-footer">
        <h3>{{ t('about.t4_1') }}</h3>
        <div>{{ t('about.t4_2') }}: <span>china@fleetmanagers.net</span></div>
        <img
          src="@/assets/img/renwu.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { onMounted, ref } from 'vue'
import 'swiper/swiper-bundle.css'
import img from '@/assets/img/i3.png'
import { useI18n } from 'vue-i18n'
import { useRouter, useRoute } from 'vue-router'
import { bannerList, newsList, getPartnersStatistics, getPartnersPageList } from '@/service/aboutUs.js'
import { toText, openUrl } from '@/utils'

import SwiperCore, { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper'
const router = useRouter()
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay])

const { t, locale } = useI18n()
const headBannerList = ref([])
const newsListValue = ref([])
const partnersList = ref([])

const siteList = ref([
  {
    // 青岛
    style: {
      top: '143px',
      left: '302px'
    },
    address: t('about.site1.address'),
    email: 'china@fleetmanagers.net',
    phone: '+86 532 6688 1088'
  }
])

const activeSite = ref(siteList.value[0])

const partnersObj = ref({})

const init = () => {
  bannerList({ bannerModel: 8 }).then((res) => {
    let imgArr = res.data.bannerImage.split(',')
    let hrefArr = res.data.bannerHref.slice(0, res.data.bannerHref.length - 1).split(',')
    headBannerList.value = imgArr.map((item, index) => {
      return {
        bannerImage: item,
        bannerHref: hrefArr[index]
      }
    })
  })
  newsList({ newLang: 'cn', pageSize: 4, pageNum: 1 }).then((res) => {
    newsListValue.value = res.rows
  })

  getPartnersPageList({
    pageNum: 1,
    pageSize: 6
  }).then((res) => {
    partnersList.value = res.rows
  })

  getPartnersStatistics().then((res) => {
    partnersObj.value = res.data
  })
}
onMounted(() => {
  init()
})
</script>
<style lang="scss" scoped>
.page-title {
  background: #252628;
  color: #fff;
  padding: 12px 20px;
  font-weight: bold;
}
.banner {
  width: 100%;
  // height: 360px;

  .swiper-container {
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.global-network {
  width: 100%;
  // display: flex;
  margin-top: 60px;
  .bottom {
    width: 100%;
    h2 {
      width: 100%;
      font-size: 20px;
      font-weight: 800;
      color: #252628;
      padding-bottom: 17px;
      margin-top: 20px;
      border-bottom: 4px solid rgba(33, 33, 33, 1);
    }

    .way-list {
      width: 100%;
      .way-item {
        margin-top: 36px;
        h3 {
          font-size: 18px;
          font-weight: 800;
          line-height: 20px;
        }

        .txt {
          font-size: 14px;

          font-weight: 400;
          color: #252628;
          margin-top: 15px;
        }
      }
    }
  }

  .top {
    width: 100%;
    margin-top: 20px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.partners {
  width: 100%;
  // height: 560px;
  background: url('@/assets/img/bg.png');
  margin-top: 60px;
  padding-top: 64px;

  h2 {
    text-align: center;
    font-size: 20px;

    font-weight: bold;
    color: #ffffff;
  }

  .partners-list {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    margin: 45px 0 65px 0px;

    .item {
      width: 419px;
      height: 100%;
      text-align: center;

      &:not(:last-child) {
        border-right: 1px solid rgba(255, 255, 255, 1);
      }

      .num {
        line-height: 40px;
        font-size: 20px;

        font-weight: bold;
        color: #ffffff;
      }

      .name {
        font-size: 14px;

        font-weight: 400;
        color: #ffffff;
        line-height: 26px;
      }
    }
  }

  .img-list {
    padding: 0 10px 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    .item {
      width: 100%;
      height: 104px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .mlr {
      // margin: 0 23px;
    }
  }
}

.title {
  width: 100%;
  color: rgba(202, 42, 2, 1);
  font-size: 20px;
  padding-bottom: 20px;

  font-weight: bold;
  color: #ca2a02;
  border-bottom: 2px solid black;
  margin-top: 40px;
}

.list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  .item {
    width: 310px;
    padding-right: 8px;

    &:not(:last-child) {
      border-right: 1px solid rgba(234, 235, 236, 1);
    }

    img {
      width: 100%;
      height: 170px;
    }

    h2 {
      margin: 20px auto;
      text-align: center;
      font-size: 16px;

      font-weight: bold;
      color: #252628;
    }

    .txt {
      font-size: 12px;

      font-weight: 400;
      color: #252628;
      line-height: 18px;
    }
  }
}

.join-us {
  width: 100%;
  // height: 900px;
  padding-bottom: 80px;
  .content {
    height: 580px;
    width: 100%;
    padding-top: 38px;
    display: flex;

    .button-prev,
    .button-next {
      width: 5%;
      height: 100%;

      img {
        margin-top: 85px;
        width: 50px;
        height: 50px;
      }
    }

    :deep(.swiper) {
      width: 70%;
      height: 60%;
      border-radius: 0.1rem;
      --swiper-theme-color: #ff6600;
      --swiper-pagination-color: #248cc0;
      --swiper-navigation-color: #248cc0;
      --swiper-navigation-size: 20px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .con {
    .item {
      position: relative;
      &:nth-of-type(2) {
        img {
          position: absolute;
          bottom: 0;
        }
      }
      img {
        width: 100%;
        display: block;
      }
      .info {
        padding: 25px;
        //   grid-template-rows: auto 70px auto;
        .tit {
          font-size: 26px;

          font-weight: 400;
          color: #252628;
          width: 100%;
          text-align: center;
        }
        .li {
          font-weight: 400;
          color: #6a6973;
          line-height: 1.8;
          font-size: 16px;
          &::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            background: var(--mainColor);
            border-radius: 50%;
            margin-right: 5px;
          }
        }
        .btn {
          // width: 560px;
          height: 40px;
          background: rgba(202, 42, 2, 1);
          position: relative;
          z-index: 99;
          width: 100%;
          :deep(span) {
            font-size: 20px;
          }
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }
}
.join-footer {
  width: 100%;
  height: 220px;
  background: rgba(202, 42, 2, 1);
  position: relative;
  padding-top: 75px;
  padding-left: 20px;
  margin-bottom: -20px;
  h3 {
    font-size: 20px;

    font-weight: bold;
    color: #ffffff;
  }

  div {
    font-size: 14px;
    position: relative;
    font-weight: 400;
    color: #ffffff;
    line-height: 26px;
    margin-top: 20px;
    z-index: 99;

    span {
      font-weight: 600;
      font-size: 16px;
      margin-left: 14px;
    }
  }
  img {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 200px;
  }
}
.team,
.information {
  .list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    flex-wrap: wrap;

    .item {
      width: 100%;
      display: flex;
      margin-bottom: 20px;
      border: none;

      .left {
        width: 100px;
        height: 120px;
        margin-right: 21px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .right {
        flex: 1;

        h2 {
          margin: 0px;
          text-align: left;
          font-size: 18px;

          font-weight: bold;
          color: #252628;
          margin-top: 12px;
          overflow: hidden; //超出的文本隐藏
          display: -webkit-box;
          -webkit-line-clamp: 2; // 超出多少行
          -webkit-box-orient: vertical;
        }

        .position {
          font-size: 14px;

          font-weight: 400;
          margin: 8px auto;
          color: #6a6973;
        }

        .txt {
          font-size: 14px;

          font-weight: 400;
          color: #252628;
          line-height: 28px;
          overflow: hidden; //超出的文本隐藏
          display: -webkit-box;
          -webkit-line-clamp: 2; // 超出多少行
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}

.introduce {
  width: 100%;
  margin-top: 70px;

  .title {
    font-size: 20px;

    font-weight: 800;
    color: #252628;
    border: none;
    width: 100%;
    text-align: center;
  }

  .txt {
    font-size: 18px;

    font-weight: 400;
    color: #252628;
    line-height: 30px;
  }
}
</style>
